<script setup lang="ts">
import type { PropagandaInfoRespVO } from '@/api/propaganda-info';
import dayjs from 'dayjs';
import { formatDuration } from '@/utils/date.utils';
import { withQueryString } from '@/utils/router.utils';

defineProps<{
  data: PropagandaInfoRespVO[]
}>();

function handleClick(item: PropagandaInfoRespVO) {
  uni.navigateTo({
    url: withQueryString('/pages/healthEducation/detail', {
      id: item.id
    })
  });
}
</script>

<template>
  <view class="related-recommend">
    <view class="related-recommend__title mb-30">
      相关推荐
    </view>
    <view class="related-recommend__list">
      <!-- 卡片列表 -->
      <view v-for="item in data" :key="item.id" class="related-recommend__card flex items-center" @click="handleClick(item)">
        <view class="related-recommend__cover">
          <image :src="item.coverFileUrl" class="h-full w-full" mode="aspectFit" />
        </view>
        <view class="related-recommend__info ml-30 flex-1">
          <view class="related-card__title">
            {{ item.contentTitle }}
          </view>
          <view class="related-card__time">
            {{ dayjs(item.uploadTime).format('YYYY-MM-DD') }} · {{ formatDuration(item.duration) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.related-recommend {
  .related-recommend__title {
    color: var(--text-color);
    font-size: 36px;
    font-weight: bold;
  }

  .related-recommend__card {
    border-radius: 20px;
    box-shadow: 0px 4px 20px 0px rgba(154, 158, 165, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
  }

  .related-recommend__cover {
    width: 308px;
    height: 202px;
  }

  .related-card__title {
    color: #3d3d3d;
    font-size: 32px;
    font-weight: 500;
  }

  .related-card__time {
    color: var(--secondary-text-color);
    font-size: 28px;
    margin-top: 30px;
  }
}
</style>
